<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '书架',
    // #ifdef MP-ALIPAY
    enablePullDownRefresh: false,
    'mp-alipay': {
      allowsBounceVertical: 'NO',
      transparentTitle: 'always',
      titlePenetrate: 'YES',
      defaultTitle: '',
    },
    // #endif
  },
}
</route>
<template>
  <CustomNavbar />
  <view class="container">
    <scroll-view
      :scroll-top="scrollTop"
      :scroll-y="true"
      class="scroll-Y"
      refresher-enabled
      :refresher-triggered="isTriggered"
      @refresherrefresh="upper"
      @scrolltolower="lower"
    >
      <view class="bookshelf">
        <view
          class="book"
          v-for="(book, index) in myBookList"
          :key="index"
          @click="navigateToBook(book.id)"
        >
          <image :src="book.bookAvatar" class="book-cover"></image>
          <text class="book-title">{{ book.bookName }}</text>
        </view>
      </view>
      <NullView
        v-if="!myBookList || myBookList.length == 0"
        content="没有书籍"
        href="去添加~"
        url="/pages/bookshelf/book"
      ></NullView>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { useBookStore } from '@/store/book'
import CustomNavbar from './component/CustomNavbar.vue'
import NullView from '@/components/NullView.vue'
import { useUserStore } from '@/store'
import { myBookListApi } from '@/service/book'
import { Book } from '@/types/book'

const navigateToBook = (bookId: number) => {
  // 使用uni.navigateTo跳转到详情页面，并携带bookId参数
  uni.navigateTo({
    url: `/pages/bookshelf/book?id=${bookId}`,
  })
}

// var initBookList = ref([
//   {
//     id: '1',
//     name: '三体',
//     author: '刘慈欣',
//     avatar: 'https://tvax4.sinaimg.cn/large/006dCke7gy1gvlpytq739j60m80m8dj002.jpg',
//     description: '',
//   },
//   {
//     id: '2',
//     name: '放风筝的人',
//     author: '卡勒德·胡赛尼',
//     avatar:
//       'https://bkimg.cdn.bcebos.com/pic/42166d224f4a20a44623e5e4a5068f22720e0cf37ac1?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
//     description: '',
//   },
//   {
//     id: '3',
//     name: '三国演义',
//     author: '罗贯中',
//     avatar:
//       'https://bkimg.cdn.bcebos.com/pic/ca1349540923dd54564eed81db51a4de9c82d058e298?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
//     description: '',
//   },
//   {
//     id: '4',
//     name: '反脆弱',
//     author: '纳西姆·尼古拉斯·塔勒布',
//     avatar:
//       'https://bkimg.cdn.bcebos.com/pic/d53f8794a4c27d1ec0f7b3dc18d5ad6edcc438d0?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080',
//     description: '',
//   },
// ])

const myBookList = ref<Book[]>([])
const userRef = useUserStore()
const bookRef = useBookStore()
const scrollTop = ref(0)

onLoad(async () => {
  if (!userRef.isLogined) {
    uni.navigateTo({ url: '/pages/login/login?page=bookshelf' })
  }
})
onShow(async () => {
  if (!userRef.isLogined) {
    uni.navigateTo({ url: '/pages/login/login?page=bookshelf' })
    return
  }
  const bookListRes = await myBookListApi({ page: 1, size: 10 })
  bookRef.bookList = bookListRes.data.records
  myBookList.value = bookRef.bookList
})

// 触发下拉刷新
const upper = async () => {
  console.log('下拉刷新')
  isTriggered.value = true
  // 加载数据 api 要加 await
  // ...
  const bookListRes = await myBookListApi({ page: 1, size: 10 })
  bookRef.bookList = bookListRes.data.records
  myBookList.value = bookRef.bookList
  setInterval(() => {
    isTriggered.value = false
  }, 1000)
}
const isTriggered = ref(false)

const lower = () => {
  console.log('lower')
  // guessRef.value?.getMore()
}
</script>

<style lang="scss">
.bookshelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.book {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 26%; /* 可根据需要调整宽度 */
  margin: 10px;
}
.book-cover {
  width: 100%;
  height: 100px; /* 可根据需要调整高度 */
  object-fit: contain;
}
.book-title {
  margin-top: 10px;
  text-align: center;
}

.scroll-Y {
  width: 100%;
  height: calc(100vh - var(--window-top));
}
</style>
